<template>
  <link rel="stylesheet" href="/assets/css/indent-details.css" />
  <!-- 导航栏 -->
  <van-nav-bar title="物流信息" left-text="返回" left-arrow @click-left="back" fixed z-index="100" />

  <div class="near-box">
    <div class="jd-qrdd-bigbox">
      <!--商品地址管理部分-->
      <div class="indent-details-box">
        <span class="indent-details-img1"></span>
        <span class="indent-details-text1">{{info.order.status_text}}</span>
        <span v-if="info.order.expid" class="indent-details-text2">
          快递公司：{{info.order.express.name}}<br />
          快递单号：{{info.order.expcode}}
        </span>
        <span v-else class="indent-details-text2">
          暂无物流信息
        </span>
      </div>

      <!--地址部分-->
      <div class="jd-qrdd-a1" v-if="info.address">
        <span class="qrdd-a1-t1">{{info.address.consignee}}</span>
        <span class="qrdd-a1-t1">{{info.address.mobile}}</span>
        <span class="qrdd-a1-t2" v-if="info.address.status == '1'">默认</span>
        <div class="qrdd-a1-b1">
          <span class="qrdd-a1-img1"></span>
          <span class="qrdd-a1-t3">{{info.address.region_text}} {{info.address.address}}</span>
        </div>
        <span class="qrdd-a1-img2"></span>
      </div>
    </div>
  </div>


  <van-steps direction="vertical" :active="0" v-if="express.length > 0">
    <van-step v-for="item in express">
      <h3>{{item.AcceptStation}}</h3>
      <p>{{item.AcceptTime}}</p>
    </van-step>
  </van-steps>
</template>

<script>

  export default {
    name: 'OrderInfo',
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0
      this.OrderData()
      this.ExpressData()
    },
    data() {
      return {
        orderid: 0,
        LoginUser: this.$cookies.get('LoginUser'),
        express: [],
        info: {
          order: {
            express: {}
          },
          address: {},
          product: [],
          contact: ''
        }
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },

      //订单数据
      async OrderData() {
        //组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid
        }

        var result = await this.$api.OrderInfo(data)

        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.info = result.data
      },

      //查询物流信息
      async ExpressData() {
        //组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid
        }

        var result = await this.$api.OrderExpress(data)

        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
          })

          return false
        }

        this.express = result.data
        // console.log(result.data);
      }
    },
  }
</script>

<style>
  .near-box {
    margin-top: 4em;
  }

  .jd-qrdd-bigbox {
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }
</style>